<template>
    <div>
        <div class="information-header">
            <div>
                <p style="padding: 10px 50px 10px ;text-align: left;font-weight:bold">个人资料</p>
            </div>
        </div>
        <div class="information-content">
            <div class="photo">
                <saler-photo></saler-photo>
                <br><br>
                <!-- <p>上传头像</p>  -->
            </div>
            <div>
                <el-row>
                    <el-col :span="12">
                        <el-form ref="salerForm" :model="salerForm" :rules="salerFormRules" label-width="100px">
                            <el-form-item label="用户名" prop="salername">
                                <el-input size="large" type="text" v-model="salerForm.salername" placeholder="用户名">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input size="large" type="email" v-model="salerForm.email" placeholder="邮箱" suffix-icon="el-icon-message">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="联系电话" prop="phoneNumber">
                                <el-input size="large" type="string" v-model="salerForm.phoneNumber" placeholder="联系电话">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="微信" prop="wechat">
                                <el-input size="large" type="string" v-model="salerForm.wechat" placeholder="微信">
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="large" type="primary" @click="handleSubmit('salerForm')">提交</el-button>
                                <el-button size="large" type="text" @click="handleReset('salerForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import formRules from 'mixins/formRules.js'
import uploadPhoto from 'components/uploadPhoto.vue'

export default {
  mixins: [formRules],
  components: {
    'saler-photo': uploadPhoto
  },
  data() {
    return {
      salerForm: {
        salername: '',
        email: '',
        phoneNumber: '',
        wechat: ''
      },
      salerFormRules: {
        salername: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
        ],
        phoneNumber: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        wechat: [{ required: true, message: '请输入微信', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmit(formName) {
      this.submitForm(formName)
    },
    handleReset(formName) {
      this.resetForm(formName)
    }
  }
}
</script>

<style>
/* .photo {
    height: 10px;
} */
</style>